jQuery(function(){
    var contentXpath = '.aui-header-primary ul.aui-nav';
    var issueKeyXpath = '#key-val';
    var syncButtonXpath = '#sync-ticket-button';
    var syncDiv = '<li style="display:flex;align-items: center;">';
        syncDiv += '<button id="sync-ticket-button" class="aui-button aui-button-primary aui-style">Sync</button><div id="sync-icon" class="lds-dual-ring" style="display:none;"></div>';
        syncDiv += '</li>';
    var cssStyle = `<style>
/**
 * sync layout
 **/
.aui-header-primary ul.aui-nav .sync-ticket-li {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: left;
 }
 .aui-header-primary ul.aui-nav .sync-ticket-li div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
 }
 /**
  * sync loading
  **/
.lds-dual-ring {
  display: inline-block;
}
.lds-dual-ring:after {
  content: " ";
  display: block;
  width: 8px;
  height: 8px;
  margin: 8px;
  border-radius: 50%;
  border: 6px solid #cef;
  border-color: #cef transparent #cef transparent;
  animation: lds-dual-ring 1.2s linear infinite;
}
@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}<style/>`;

    // developer select
    syncDiv += '<li class="sync-ticket-li">';
    syncDiv += '</li>';

    jQuery('body').append(cssStyle);
    jQuery(contentXpath).append(syncDiv);

    // developer form
    jQuery(contentXpath + ' .sync-ticket-li').jsonForm({
      "schema": {
    "developer": {
      "title": "Developer: ",
      "type": "string",
      "enum": [
        "male",
        "female",
        "alien"
      ]
    }
  },
  "form": [
    {
      "key": "developer",
      "onChange": function (evt) {
        var value = $(evt.target).val();
        if (value) alert(value);
        // set to localStrong
      }
    },
    {
      "type": "button",
      "title": "Sync",
      "fieldHtmlClass":"aui-button aui-button-primary aui-style",
      "onClick": function (evt) {
        evt.preventDefault();
        if (confirm('Sync Ticket To SC Jira ?')) {
          sourceJira.syncOne(jQuery(issueKeyXpath).text());
        }
      }
    }
  ],
  "params": {
    "fieldHtmlClass": "input-small"
  }
});

});